/*
    当需要从store中的state中派生出一些状态时，就可以使用getter
    getter与计算属性一样，它的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算


    Getter会暴露为store.getters对象，可以以属性的形式访问这些值

*/

const store = new Vuex.Store({
  state: {
    todos: [
      { id: 1, text: '...', done: true },
      { id: 2, text: '...', done: false }
    ]
  },
  getters: {
    doneTodos: state => { // store.state作为第一个参数
      return state.todos.filter(todo => todo.done) // 过滤
    },
    doneTodosCount: (state, getters) => { // store.getters对象作为第二个参数
      return getters.doneTodos.length
    }
  }
})


// 在组件中使用
computed: {
  doneTodosCount () {
    return this.$store.getters.doneTodosCount
  }
}


/*
    通过方法访问： 可以让getter返回一个函数，来实现个getter传参
    getter在通过方法访问时，每次都会进行调用，而不会缓存结果
*/

const store = new Vuex.Store({
  state: {
    todos: [
      { id: 1, text: '...', done: true },
      { id: 2, text: '...', done: false }
    ]
  },
  getters: {
    getTodoById: (state) => (id) => {
      return state.todos.find(todo => todo.id === id)
    }
  }
})

/*
    mapGetters辅助函数，该函数仅仅是将store中的getter映射到局部计算属性
  
*/

import { mapGetters } from 'vuex'

export default {
  computed: {
  // 使用对象展开运算符将 getter 混入 computed 对象中
    ...mapGetters([
      'doneTodosCount',
      'anotherGetter',
      // ...
    ])
  }
}

// 如果想将getter属性另取一个名字，需要使用对象形式
...mapGetters({
  // 把 `this.doneCount` 映射为 `this.$store.getters.doneTodosCount`
  doneCount: 'doneTodosCount'
})